<template>
<div>
    <div>
    <el-card class="box-card" style="margin-left: auto; margin-right: auto;">
        <div slot="header" class="clearfix">
            <span>账单管理</span>
        </div>
        <div>
          <span style=" float: left; margin-top: 10px;">业主姓名</span>
          <el-input style="float: left; width: 20%; margin-bottom: 20px;  margin-left: 20px;" v-model="userName" placeholder="请输入内容"></el-input>
          <el-button type="primary" icon="el-icon-circle-plus" style="float: right; " class="b1" @click="billSelect(userName)">查询</el-button>
        </div>
    </el-card>
    <el-card class="box-card" style="margin-left: auto; margin-right: auto;">
        <div slot="header" class="clearfix">
            <span>账单列表</span>
            <el-button type="primary" icon="el-icon-circle-plus" style="float: right; " @click="Add(),dialogFormVisible1 = true">新建</el-button>
        </div>
        <div>
            <el-table
            :data="InfoList"
            style="width: 100%">
            <el-table-column
                prop="userName"
                label="业主名字"
                width="150">
            </el-table-column>
            <el-table-column
                prop="prepaidNumber"
                label="充值单号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="type"
                label="缴费类型"
                width="150">
            </el-table-column>
            <el-table-column
                prop="topUpTime"
                label="缴费时间"
                width="100">
            </el-table-column>
            <el-table-column
                prop="paymentAmount"
                label="缴费金额"
                width="150">
            </el-table-column>
            <el-table-column label="状态"  width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.state == 1">已缴费</span>
                <span v-if="scope.row.state == 2">未缴费</span>
                <span v-if="scope.row.state == 3">缴费失败</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="methodOfPayment"
                label="支付方式"
                width="150">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="200">
                <template slot-scope="scope">
                    <!-- <el-button  type="text" size="small">审核</el-button> -->
                    <el-button  type="text" size="small" @click="Update(scope.row),dialogFormVisible= true">编辑</el-button>
                    <el-button type="text" size="small" @click="billDelete(scope.row.topUpId)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal">
            </el-pagination>
        </div>
    </el-card>
  </div>
  <div>
        <el-dialog title="新增" :visible.sync="dialogFormVisible1">
            <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="业主名字" >
                  <el-select v-model="ruleForm.userId" placeholder="请选择">
                    <el-option
                      v-for="item in tableData"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="缴费单号" >
                <el-input v-model="ruleForm.prepaidNumber"></el-input>
                </el-form-item>
                <el-form-item label="缴费类型" >
                  <el-select v-model="ruleForm.paymentTypeId" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.paymentTypeId"
                      :label="item.type"
                      :value="item.paymentTypeId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="缴费时间" >
                <div class="block">
                  <el-date-picker
                    v-model="ruleForm.topUpTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                   >
                  </el-date-picker>
                </div>
                </el-form-item>
                <el-form-item label="缴费金额" >
                <el-input v-model="ruleForm.paymentAmount"></el-input>
                </el-form-item>
                <el-form-item label="缴费状态" >
                  <el-select v-model="ruleForm.state" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.state"
                      :label="item.sname"
                      :value="item.state">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="支付方式" >
                <el-input v-model="ruleForm.methodOfPayment"></el-input>
                </el-form-item>
                <el-form-item >
                <el-button type="primary" @click="billAdd('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="业主名字" >
                  <el-select v-model="ruleForm.userId" placeholder="请选择">
                    <el-option
                      v-for="item in tableData"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="缴费单号" >
                <el-input v-model="ruleForm.prepaidNumber"></el-input>
                </el-form-item>
                <el-form-item label="缴费类型" >
                  <el-select v-model="ruleForm.paymentTypeId" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.paymentTypeId"
                      :label="item.type"
                      :value="item.paymentTypeId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="缴费时间" >
                <div class="block">
                  <el-date-picker
                    v-model="ruleForm.topUpTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                   >
                  </el-date-picker>
                </div>
                </el-form-item>
                <el-form-item label="缴费金额" >
                <el-input v-model="ruleForm.paymentAmount"></el-input>
                </el-form-item>
                <el-form-item label="缴费状态" >
                  <el-select v-model="ruleForm.state" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.state"
                      :label="item.stateName"
                      :value="item.state">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="支付方式" >
                <el-input v-model="ruleForm.methodOfPayment"></el-input>
                </el-form-item>
                <el-form-item >
                <el-button type="primary" @click="billUpdate('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  data() {
        return {
          tableData: [],
          InfoList:[],
          input: '',
          dialogFormVisible: false,
          dialogFormVisible1: false,
          ruleForm:{
            topUpId:'',
            userId:'',
            prepaidNumber:'',
            paymentTypeId:'',
            topUpTime:'',
            paymentAmount:'',
            state:'',
            createTime:'',
            userName:'',
            methodOfPayment:'',
          },
          userName:'',
          pageTotal: 0, // 总数
          pageNum: 1, // 页数
          pageSize: 2, // 条数
          currentPage: 1, // 分页中当前页变量
          options: [
            {
            state: '1',
            stateName: '已缴费'
          }, {
            state: '2',
            stateName: '未缴费'
          }, {
            state: '3',
            stateName: '缴费失败'
          }
          ],
          value: '',
          typeName:'',
          options1: [{
            paymentTypeId: '1',
            type: '水费'
          }, {
            paymentTypeId: '2',
            type: '电费'
          }, {
            paymentTypeId: '3',
            type: '物业费'
          }],
          
        }
    },
    methods: {
          userNameSelect(){
            this.$axios.get("http://localhost:9000/serverchy/Bill/userNameSelect").then(response=>{
                  this.tableData=response.data.data.list
              }
              ).catch(e=>{
              })
          },
          billDelete(topUpId){
              this.$confirm('此操作将永久删除用户信息, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
              }).then(() => {
              this.$axios.get("http://localhost:9000/serverchy/Bill/billDelete",{
                  params: {
                  topUpId: topUpId
                  }
              }).then(response=>{
                  this.billSelect();
                  this.$message({
                  message: '删除成功',
                  type: 'success'
                  })
              }).catch(e=>{  
              })
              }).catch(e=>{   
              })
        },
        Update(data){
              this.userNameSelect()
              this.ruleForm.topUpId=data.topUpId
              this.ruleForm.userId=data.userId
              this.ruleForm.prepaidNumber= data.prepaidNumber
              this.ruleForm.paymentTypeId= data.paymentTypeId
              this.ruleForm.content=data.content
              this.ruleForm.topUpTime=data.topUpTime
              this.ruleForm.paymentAmount=data.paymentAmount
              this.ruleForm.state=data.state
              this.ruleForm.methodOfPayment=data.methodOfPayment
          },
        Add(){
            this.userNameSelect()
            this.ruleForm.userId=''
            this.ruleForm.prepaidNumber= ''
            this.ruleForm.paymentTypeId= ''
            this.ruleForm.topUpTime=''
            this.ruleForm.paymentAmount=''
            this.ruleForm.state=''
            this.ruleForm.methodOfPayment=''
        },
        billAdd(){
              this.$axios.post("http://localhost:9000/serverchy/Bill/billAdd",{
              userId:this.ruleForm.userId,
              prepaidNumber: this.ruleForm.prepaidNumber,
              paymentTypeId: this.ruleForm.paymentTypeId,
              topUpTime: this.ruleForm.topUpTime,
              paymentAmount:this.ruleForm.paymentAmount,
              state:this.ruleForm.state,
              methodOfPayment:this.ruleForm.methodOfPayment
            }).then(response=>{
                this.billSelect();
                this.dialogFormVisible1=false
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
            }).catch(e=>{
                this.$message.error('添加失败')
            })
        },
        billUpdate(){
              this.$axios.post("http://localhost:9000/serverchy/Bill/billUpdate",{
              topUpId:this.ruleForm.topUpId,
              userId:this.ruleForm.userId,
              prepaidNumber: this.ruleForm.prepaidNumber,
              paymentTypeId: this.ruleForm.paymentTypeId,
              topUpTime: this.ruleForm.topUpTime,
              paymentAmount:this.ruleForm.paymentAmount,
              state:this.ruleForm.state,
              methodOfPayment:this.ruleForm.methodOfPayment
            }).then(response=>{
                this.billSelect();
                this.dialogFormVisible=false
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
            }).catch(e=>{
                this.$message.error('修改失败')
            })
        },
        handleSizeChange(val) {
          this.pageSize = val
          this.billtSelect()
        },
        handleCurrentChange(val) {
          this.pageNum =val
          this.billSelect()
        },
        billSelect() {
            // 获取所有用户信息
            this.$axios.get("http://localhost:9000/serverchy/Bill/billSelect",{
              params:{
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userName:this.userName
              }
          }).then((res) => {
              this.InfoList = res.data.list
              this.pageTotal = res.data.total
            });
        },
    },
    mounted() {
      this.billSelect()
    }
}
</script>

<style>
    .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1136px;
  }
  
</style>